<template>
    <div class="total_data">
        <ul>
            <li v-for="total_data in total_datas" :key="total_data">
                <p>{{ total_data.name }}</p>
                <h2 class="total_data_h2_1" :class="total_data.icon">{{ total_data.num }}</h2>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'total_data',
        data(){
            return {
                total_data:[],
                number: 0,
                tweenedNumber: 0
            }
        },
        computed:{
            total_datas(){

                let total_datas = []
                for(let i=0; i<this.total_data.length; i++){
                    total_datas[i] = this.total_data[i]
                    if(this.total_data[i].type == "upload"){
                        total_datas[i].name = "总填报数"
                        total_datas[i].icon = "info"
                    }else if(this.total_data[i].type == "adopt"){
                        total_datas[i].name = "审核通过数"
                        total_datas[i].icon = "Success"
                    }else if(this.total_data[i].type == "wait"){
                        total_datas[i].name = "待审核"
                        total_datas[i].icon = "wait"
                    }else{
                        total_datas[i].name = "驳回"
                        total_datas[i].icon = "Reject"
                    }

                }
                return total_datas
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/totalData')
                .then(response=>{
                    this.total_data = response.data.data
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    .total_data{
        position:absolute;
        top:165px;
        left:440px;
        font-family: LCDfont;
    }
    .total_data ul li{
        width: 300px;
        display: inline-block;
    }
    .total_data p{
        padding-left: 40px;
        color: #FFF;
        background: url(../../assets/total_data_icon_1.png) 20px 5px no-repeat;
        text-align: left;
    }
    .total_data_h2_1{
        color: #00ffff;
        font-size: 52px;
        padding-left: 40px;
        background: url(../../assets/total_data_icon_2.png) 0 18px no-repeat;
        text-align: left;
    }
    .total_data_h2_2{
        color: #00ffff;
        font-size: 52px;
        padding-left: 40px;
        background: url(../../assets/total_data_icon_3.png) 0 18px no-repeat;
        text-align: left;
    }
    .Success{
        color: #3ff402;
    }
    .Reject{
        color: #ff3000;
    }
    .info{
        color: #00ffff;
    }
    .wait{
        color: #e57ffb;
    }
    @font-face
    {
        font-family: LCDfont;
        src: url(../../assets/fonts/LCD.ttf)
    }
</style>